<template>
  <div class="app-container">
    <!-- 轮播图区域 -->
    <el-carousel :interval="5000" height="600px">
      <el-carousel-item v-for="(item, i) in announcements" :key="i">
        <el-image :src="item.image || 'https://place-hold.it/1200x400'" fit="cover" style="height: 60%">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <el-card class="el-card--always-shadow carousel-card">
          <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
            <h3>{{ item.title }}</h3>
            <p type="info">{{ item.description }}</p>
          </div>
        </el-card>
      </el-carousel-item>
    </el-carousel>

    <el-divider></el-divider>

    <!-- 场馆信息展示 -->
    <div class="venue-container">
      <div class="venue-wrapper">
        <el-row :gutter="40" class="mt-4">
          <el-col :span="8" v-for="venue in venueList" :key="venue.venueId">
            <el-card @click="handleVenueClick(venue.venueId)">
              <div slot="header" class="clearfix">
                <el-row>
                  <el-col :span="18">
                    <el-text tag="b">{{ venue.venueName }}</el-text>
                  </el-col>
                  <el-col :span="6">
                    <el-tag
                      :type="statusMap[venue.status].type"
                      effect="dark"
                    >
                      {{ statusMap[venue.status].text }}
                    </el-tag>
                  </el-col>
                </el-row>
              </div>

              <el-image
                :src="'http://localhost/dev-api/'+venue.thumbnailUrl"
                fit="cover"
                style="height: 200px"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>

              <el-descriptions :column="1" class="el-mt-2">
                <el-descriptions-item label="地址">
                  <el-icon><location /></el-icon>
                  {{ venue.address }}
                </el-descriptions-item>
                <el-descriptions-item label="最大容量">
                  <el-icon><user /></el-icon>
                  {{ venue.maxCapacity }}人
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            <el-divider></el-divider>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { listVenue } from "@/api/venue/venue";

export default {
  name: "Index",
  components: {
  },
  data() {
    return {
      total: 0,
      venueList: [],
      title: "",
      open: false,
      queryParams: {},
      statusMap: {
        0: { type: 'success', text: '可用' },
        1: { type: 'warning', text: '维修中' },
        2: { type: 'danger', text: '已报废' },
      },
      announcements: [
        {
          title: '国庆节开放时间调整通知',
          description: '10月1日至10月3日开放时间调整为9:00-18:00',
          image: 'https://place-hold.it/1200x400'
        },
        {
          title: '新增羽毛球场地开放预订',
          description: '第三体育馆新增10个标准羽毛球场',
          image: 'https://place-hold.it/1200x400'
        }
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleVenueClick(venueId) {
      this.$router.push({
        name: "VenueInfo",
        params: { id: venueId },
      });
    },
    getList() {
      this.loading = true;
      listVenue(this.queryParams).then(response => {
        this.venueList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.el-card--always-shadow {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 新增样式 */
.venue-wrapper {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
  margin-top: 20px; /* 修改: 增加间距 */
  width: 90%; /* 调整宽度 */
  margin: 0 auto; /* 页面居中 */
}

/* 调整轮播图样式 */
.el-carousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 修复轮播图中 el-card 的显示问题 */
.carousel-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  padding: 16px;
  border-radius: 4px 4px 4px 4px; /* 圆角 */
  hight: 20%
}
</style>
